<template>
    <div>
        <Header></Header>
        <HeaderSearch></HeaderSearch>
        <div>
            <div class="crumb">
                <div class="w">
                    <div class="crumb-con">
                        <a class="link" href="./index">HappyLaiShop</a>
                        <span>>></span>
                        <span class="link-text">商品列表</span>
                    </div>
                </div>
            </div>
            <div class="page-wrap w">
                <ul class="sort-con">
                    <li class="sort-item active" data-type="default">默认排序</li>
                    <li class="sort-item" data-type="price">
                        <span>价格</span>
                        <i class="fa fa-sort-asc"></i>
                        <i class="fa fa-sort-desc"></i>
                    </li>
                </ul>
                <!-- list 容器 -->
                <ul class="p-list-con">
                    <p class="err-tip" v-if="isLoading">很抱歉，实在找不到您要的商品。</p>
                    <li class="p-item">
                        <div class="p-img-con">
                            <a class="link" href="./detail.html?productId=1" target="_blank">
                                <img class="p-img" src="http://www.placehold.it/180x200/&text=1" alt="电冰箱" />
                            </a>
                        </div>
                        <div class="p-price-con">
                            <span class="p-price">￥888</span>
                        </div>
                        <div class="p-name-con">
                            <a class="p-name" href="./detail.html?productId=1" target="_blank">电冰箱</a>
                        </div>
                    </li>
                </ul>
                <!-- 分页容器 -->
                <div class="pagination"></div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from "@/views/layout/header.vue";
import Footer from "@/views/layout/footer.vue";
import HeaderSearch from '@/views/layout/header-search.vue';
export default {
    name: "index",
    components: {Header, Footer, HeaderSearch},
    data: function() {
      return {
        isLoading: false
      }
    },
    mounted: function(){

    },
    methods: {

    }
}
</script>

<style scoped>

/* 面包屑导航 */
.crumb{
    margin-bottom: 15px;
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: #888;
    font-size: 14px;
    border-top: 2px solid #c60023;
}
/* 排序按钮 */
.sort-con{
    overflow: auto;
}
.sort-con .sort-item{
    float: left;
    display: inline-block;
    position: relative;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    margin-right: -1px;
    background: #fff;
    color: #333;
    cursor: pointer;
}
.sort-con .sort-item.active{
    background: #c60023;
    border: 1px solid #c60023;
    color: #fff;
}
.sort-con .sort-item .fa-sort-desc{
    position: absolute;
    top: 8px;
    right: 8px;
}
.sort-con .sort-item.asc .fa-sort-desc{
    opacity: .6;
}
.sort-con .sort-item.desc .fa-sort-asc{
    opacity: .6;
}

/* 列表 */
.p-list-con{
    margin-top: 15px;
    margin-right: -20px;
    overflow: hidden;
}
.p-list-con .p-item{
    position: relative;
    width: 180px;
    float: left;
    padding: 10px;
    margin: 0 20px 20px 0;
    background: #fff;
}
.p-list-con .p-item .p-img-con{
    width: 180px;
    height: 200px;
}
.p-list-con .p-item .p-img-con .p-img{
    width: 100%;
    height: 100%;
}
.p-list-con .p-item .p-price-con{
    height: 30px;
    line-height: 30px;
}
.p-list-con .p-item .p-price-con .p-price{
    font-size: 16px;
    color: #e7380d;
}
.p-list-con .p-item .p-name-con{
    height: 40px;
    overflow: hidden;
}
.p-list-con .p-item .p-name-con .p-name{
    line-height: 20px;
    margin-bottom: 10px;
    color: #666;
    text-decoration: none;
}
/* 错误信息 */
.err-tip{
    height: 60px;
    line-height: 60px;
    color: #f60;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: #eee;
}
</style>